<template>
  <div>

    <!--注册表单-->
    <template v-if="isRegister">
      <div class="pageheader">
        <XHeader :left-options="{showBack:false,backText:''}" :title="xheader.title"
                 class="XHeader login-title"></XHeader>
      </div>
      <div class="page">
        <!--      <div>-->
        <!--        <div>-->
        <!--          <chimage class="logo" mode="aspectFit" :src="require('@/assets/img/logo.png')"></chimage>-->
        <!--        </div>-->
        <!--        <div class="text">-->
        <!--          <span>欢迎来到优鲤商城</span>-->
        <!--        </div>-->
        <!--      </div>-->
        <div class="logo_img" v-if="isSanXia">
          <img :src="sanxiaLogoPNG">
        </div>
        <div v-else>
          <div class="text">
            <span>欢迎来到内购商城</span>
          </div>
        </div>

        <div style="margin-top: 28px">
          <div class="inputbox">
            <chimage class="icon" :src="require('@/assets/img/icon_phone.png')" mode="aspectFit"></chimage>
            <input class="input" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                   v-model.trim="phone" placeholder="请输入手机号" type="number" maxlength="11" @focusout="inputBlur" @focusin="inputFocus"/>
          </div>
          <div class="inputbox2">
            <div class="inputbox">
              <chimage class="icon" mode="aspectFit" :src="require('@/assets/img/icon_mm.png')"></chimage>
              <input class="input" v-model="mobilecode" type="number" placeholder="请输入验证码" @focusout="inputBlur" @focusin="inputFocus"/>
            </div>
            <div class='code_btn'>
              <span @click="getMobileCode" ref='code_btn'>获取验证码</span>
            </div>
          </div>

          <div style="margin-top: 32px">
            <button class="button" @click="onSubmit">注册
            </button>
          </div>

          <div style="margin-top: 12px">
            <div class="flex flex-space-between desc">
              <span style="color: #351009"></span>
              <span style="color: #5FC2FF;" @click="toLogin">登录</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!--协议-->
    <div class="agreement" v-if="isAgreement">
      <div class="agreement-title">{{agreement.agreement_info.agreement_title}}</div>
      <div
        class="agreement-content"
        v-html="agreement.agreement_info.agreement_content">
      </div>
      <div class="agreement-btn">
        <button class="button" @click="onRegister">同意并继续</button>
      </div>
    </div>

    <actionsheet
      v-model="iscoList"
      :menus="coList"
      :close-on-clicking-mask="false"
      @on-click-menu="onColist"
    ></actionsheet>
  </div>
</template>

<script>
  // import { cookie } from 'vux'
  import Account from '../../dll/account'
  // import Util from '@/utils/util'

  import sanxiaLogoPNG from '../../assets/sanxia/sanxia_logo.png'

  export default {
    name: 'login',
    data () {
      return {
        xheader: {
          title: '新用户注册'
        },
        sanxiaLogoPNG,
        co_number: null,
        phone: '',
        mobilecode: '',
        isPhone: false,
        iscoList: false,
        coList: [],
        coIndex: 0,
        timer: null,
        minutes: 60,
        first_code: true,

        // 协议
        agreement: {},
        isRegister: false,
        isAgreement: false
      }
    },
    watch: {
      phone (val, oldVal) {
        if (val.length > 11) {
          this.phone = oldVal
          return
        }
        if (/^\d{11}$/.test(val)) {
          this.isPhone = true
        } else {
          this.isPhone = false
        }
      }
    },
    created () {
      this.getAgreement()
      this.init()
    },
    methods: {
      init () {
        let query = this.$route.query
        if (query.ticket) {
          this.ticket = query.ticket
        }
        if (query.invite_code) {
          this.invite_code = query.invite_code
        } else {
          this.checkSource()
        }
      },
      onColist (menuKey) {
        this.co_number = menuKey
        if (this.ticket) {
        } else {
          this.onSubmit()
        }
      },
      loginfun () {
      },
      async checkSource () {
        if (!this.invite_code) {
          this.$vux.alert.show({
            title: '提示',
            content: '请扫描企业二维码进行注册'
          })
          return false
        }
        return true
      },
      async toLogin () {
        this.$router.replace({
          name: 'login',
          params: { from: this.$route.params.from }
        })
      },
      async getMobileCode () {
        // 检查页面来源
        let res_source = await this.checkSource()
        if (!res_source) return
        if (this.phone == '') {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入手机号'
          })
          return
        }
        let phone_reg = /^1([3456789])\d{9}$/
        if (!phone_reg.test(this.phone)) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入正确的手机号'
          })
          return
        }
        if (this.timer) {
          return
        }
        this.$vux.loading.show({
          text: '获取中...'
        })

        let param = {
          phone: this.phone,
          invite_code: this.invite_code
        }
        let res = await Account.getMobileCode(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.starTimer()
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
          return
        }
        this.$vux.alert.show({
          title: '提示',
          content: res.msg
        })
      },
      async onSubmit () {
        if (this.phone === '') {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入手机号'
          })
          return
        }
        let phone_reg = /^1([3456789])\d{9}$/
        if (!phone_reg.test(this.phone)) {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入正确的手机号'
          })
          return
        }
        // eslint-disable-next-line eqeqeq
        if (this.mobilecode === '') {
          this.$vux.alert.show({
            title: '提示',
            content: '请输入手机验证码'
          })
          return
        }

        window.scrollBy(0, 10)
        let param = {
          phone: this.phone,
          invite_code: this.invite_code,
          mobile_code: this.mobilecode
        }
        this.$vux.loading.show({
          text: '注册中...'
        })
        let res = await Account.doRegister(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.endTimer()
          this.globalData.access_token = res.data.access_token
          this.globalData.userInfo = res.data.extra
          this.globalData.userInfo.avatarUrl =
            this.globalData.userInfo.avatarUrl || require('@/assets/img/dfimg.jpg')
          // cookie.set("accesstoken", res.data.access_token);
          localStorage.setItem('accesstoken', res.data.access_token)
          localStorage.setItem('userInfo', JSON.stringify(res.data.extra))
          localStorage.loginPhone = this.phone
          if (res.data.extra.is_weixin == 1) {
            // if (
            //   !res.data.extra.wxgzh_openid ||
            //   res.data.extra.wxgzh_id != res.data.extra.appid
            // ) {
            location.href = res.data.extra.return_url
            return
            // }
          }
          this.$router.replace({
            name: 'mall',
            params: { from: this.$route.params.from }
          })
          return
        }
        this.$vux.alert.show({
          title: '提示',
          content: res.msg
        })
      },
      starTimer: function () {
        this.minutes = 60
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.minutes -= 1
            this.$refs.code_btn.innerText = this.minutes + '后重新获取'
            if (this.minutes <= 0) {
              this.endTimer()
              this.$refs.code_btn.innerText = '获取验证码'
            }
          }, 1000)
        }
      },
      endTimer: function () {
        clearInterval(this.timer)
        this.timer = null
      },

      // 获取协议内容
      async getAgreement () {
        this.$vux.loading.show({
          text: '加载中...'
        })
        let res = await Account.getAgreement()
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.agreement = res.data
          let agreementStatus = parseFloat(res.data.agreement_status)
          if (agreementStatus) { // 有协议
            this.isAgreement = true
          } else { // 无协议
            this.isRegister = true
          }
        }
      },

      // 同意继续
      onRegister () {
        this.isAgreement = false
        this.isRegister = true
      }
    },

    beforeDestroy () {
      this.isAgreement = false
      this.isRegister = false
    }
  }
</script>

<style lang="less" scoped>
  body {
    background-color: #ffffff;
  }

  .page {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 58px;
    background-color: #fff;
  }

  .logo {
    height: 51px;
    width: 119px;
  }

  .text {
    margin-top: 16px;
    color: #351009;
    font-size: 34px;
    line-height: 48px;
  }

  .inputbox {
    border: 1px solid #f5f3f3;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 12px;
  }

  .inputbox2 {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
  }

  .inputbox2 > .inputbox {
    flex: 1
  }

  .inputbox2 .inputbox .input {
    width: 100px;
  }

  .code_btn {
    border: 1px solid #f5f3f3;
    height: 58px;
    border-left-style: none;
    line-height: 58px;
    font-size: 15px;
    background-color: #f5f3f3;
    text-align: center;
    padding: 0 8px;
  }

  .code_btn span {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .inputbox .icon {
    width: 26px;
    height: 26px;
  }

  .inputbox .icon + .input {
    margin-left: 8px;
  }

  .inputbox .input {
    font-size: 17px;
    color: #351009;
    letter-spacing: 1.06px;
    line-height: 24px;
    height: 24px;
    flex: 1;
  }

  .inputbox + .inputbox {
    margin-top: 12px;
  }

  .button {
    height: 44px;
    font-size: 16px;
    line-height: 44px;
  }

  .des {
    font-size: 15px;
  }

  .mt12 {
    margin-top: 12px;
  }

  .disabled {
    background: #b4b3b2;
  }

  .logo_img {
    img {
      max-width: 100%;
    }
  }

  /deep/ .login-title {
    /deep/ .vux-header-title {
      height: auto !important;
      padding: 20px 0 !important;
      font-size: 20px !important;
      letter-spacing: 2px !important;
    }
  }

  .agreement {

    .agreement-title {
      /*background: $currency-color-tab-header;*/
      padding: 10px;
      color: #333;
      font-weight: bold;
      text-align: center;
    }

    .agreement-content {
      text-align: left;
      padding: 12px;
      overflow: auto;

      p {
        span {
          display: contents;
        }
      }
    }

    .agreement-btn {
      padding: 10px;

    }
  }
</style>
